package me.victor.jetpackcompose

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

/**
 * @author song.zheng
 * @create 2024/3/18
 * @description RowsAndColumns
 */
@Composable
fun CustomColumn() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Surface(
            modifier = Modifier
                .width(200.dp)
                .height(50.dp),
            color = MaterialTheme.colorScheme.primary
        ) {

        }
        Surface(
            modifier = Modifier
                .width(200.dp)
                .height(50.dp),
            color = MaterialTheme.colorScheme.primary
        ) {

        }
        Surface(
            modifier = Modifier
                .width(200.dp)
                .height(50.dp),
            color = MaterialTheme.colorScheme.primary
        ) {

        }
        Surface(
            modifier = Modifier
                .width(200.dp)
                .height(50.dp),
            color = MaterialTheme.colorScheme.primary
        ) {

        }
    }
}

@Composable
fun CustomColumn2() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Surface(
            modifier = Modifier
                .width(200.dp)
                .weight(3f),
            color = MaterialTheme.colorScheme.primary
        ) {

        }
        Surface(
            modifier = Modifier
                .width(200.dp)
                .weight(1f),
            color = MaterialTheme.colorScheme.secondary
        ) {

        }
    }
}

@Composable
fun ColumnScope.CustomItem(weight: Float, color: Color = MaterialTheme.colorScheme.primary) {
    Surface(
        modifier = Modifier
            .width(200.dp)
            .weight(weight),
        color = color
    ) {

    }
}

@Composable
fun CustomColumn3() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        CustomItem(3f, MaterialTheme.colorScheme.secondary)
        CustomItem(1f)
    }
}

@Composable
fun RowScope.CustomItem(weight: Float, color: Color = MaterialTheme.colorScheme.primary) {
    Surface(
        modifier = Modifier
            .height(50.dp)
            .weight(weight),
        color = color
    ) {

    }
}

@Composable
fun CustomRow() {
    Row(
        modifier = Modifier.fillMaxSize(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        CustomItem(3f, MaterialTheme.colorScheme.secondary)
        CustomItem(1f)
    }
}